@switch (variantIndex) {
  @case (0) {
    <div class="flex-grow-1 pt-0" mat-dialog-content>
      <div class="intro-container">
        <div class="intro-inner-container mx-auto">
          <div class="h-100 intro w-100"></div>
        </div>
      </div>
      <div>
        <h5 class="align-items-center d-flex justify-content-center mb-3">
          <span>Ghostfolio Premium</span>
          <gf-premium-indicator class="ml-1" [enableLink]="false" />
        </h5>
        <div class="font-weight-normal h5 mb-3 text-center" i18n>
          Are you an ambitious investor who needs the full picture?
        </div>
        <p i18n>
          Upgrade to Ghostfolio Premium today and gain access to exclusive
          features to enhance your investment experience:
        </p>
        <ul class="list-unstyled mb-3 pl-3">
          <li class="align-items-center d-flex mb-1">
            <ion-icon class="mr-1" name="checkmark-circle-outline" />
            <span i18n>Portfolio Summary</span>
          </li>
          <li class="align-items-center d-flex mb-1">
            <ion-icon class="mr-1" name="checkmark-circle-outline" />
            <span i18n>Portfolio Allocations</span>
          </li>
          <li class="align-items-center d-flex mb-1">
            <ion-icon class="mr-1" name="checkmark-circle-outline" />
            <span i18n>Performance Benchmarks</span>
          </li>
          <li class="align-items-center d-flex mb-1">
            <ion-icon class="mr-1" name="checkmark-circle-outline" />
            <span i18n>FIRE Calculator</span>
          </li>
          <li class="align-items-center d-flex mb-1">
            <ion-icon class="mr-1" name="checkmark-circle-outline" />
            <span i18n>Professional Data Provider</span>
          </li>
          <li class="align-items-center d-flex mb-1">
            <ion-icon class="mr-1" name="checkmark-circle-outline" />
            <span i18n>and more Features...</span>
          </li>
        </ul>
        <p class="m-0" i18n>
          Get the tools to effectively manage your finances and refine your
          personal investment strategy.
        </p>
      </div>
    </div>
    <div class="justify-content-end" mat-dialog-actions>
      <button
        mat-button
        [disabled]="remainingSkipButtonDelay > 0"
        (click)="closeDialog()"
      >
        <ng-container i18n>Skip</ng-container>
        @if (remainingSkipButtonDelay > 0) {
          ({{ remainingSkipButtonDelay }})
        }
      </button>
      <a
        color="primary"
        mat-flat-button
        [routerLink]="routerLinkPricing"
        (click)="closeDialog()"
      >
        <span i18n>Upgrade Plan</span>
        <ion-icon class="ml-1" name="arrow-forward-outline" />
      </a>
    </div>
  }
  @case (1) {
    <div class="flex-grow-1 pt-0" mat-dialog-content>
      <div class="intro-container">
        <div class="intro-inner-container mx-auto">
          <div class="h-100 intro w-100"></div>
        </div>
      </div>
      <div>
        <div class="font-weight-normal h5 text-center" i18n>
          Get access to 80’000+ tickers from over 50 exchanges
        </div>
        <p class="my-2 text-center" i18n>with</p>
        <h5 class="align-items-center d-flex justify-content-center">
          <span>Ghostfolio Premium</span>
          <gf-premium-indicator class="ml-1" [enableLink]="false" />
        </h5>
      </div>
    </div>
    <div class="justify-content-end" mat-dialog-actions>
      <button
        mat-button
        [disabled]="remainingSkipButtonDelay > 0"
        (click)="closeDialog()"
      >
        <ng-container i18n>Skip</ng-container>
        @if (remainingSkipButtonDelay > 0) {
          ({{ remainingSkipButtonDelay }})
        }
      </button>
      <a
        color="primary"
        mat-flat-button
        [routerLink]="routerLinkPricing"
        (click)="closeDialog()"
      >
        <span i18n>Upgrade Plan</span>
        <ion-icon class="ml-1" name="arrow-forward-outline" />
      </a>
    </div>
  }
  @case (2) {
    <div class="flex-grow-1 pt-0" mat-dialog-content>
      <div class="intro-container">
        <div class="intro-inner-container mx-auto">
          <div class="h-100 intro w-100"></div>
        </div>
      </div>
      <div>
        <h5 class="align-items-center d-flex justify-content-center">
          <span>Ghostfolio Premium</span>
          <gf-premium-indicator class="ml-1" [enableLink]="false" />
        </h5>
        <p class="my-2 text-center" i18n>for</p>
        <div class="font-weight-normal h5 text-center">
          <ng-container i18n>less than</ng-container> $1
          <ng-container i18n>per week</ng-container>
        </div>
      </div>
    </div>
    <div class="flex-column" mat-dialog-actions>
      <button
        class="mb-2 py-4 w-100"
        mat-button
        [disabled]="remainingSkipButtonDelay > 0"
        (click)="closeDialog()"
      >
        <ng-container i18n>Skip</ng-container>
        @if (remainingSkipButtonDelay > 0) {
          ({{ remainingSkipButtonDelay }})
        }
      </button>
      <a
        class="m-0 py-4 w-100"
        color="primary"
        mat-flat-button
        [routerLink]="routerLinkPricing"
        (click)="closeDialog()"
      >
        <span i18n>Upgrade Plan</span>
        <ion-icon class="ml-1" name="arrow-forward-outline" />
      </a>
    </div>
  }
  @case (3) {
    <h1
      class="align-items-center d-flex justify-content-center"
      mat-dialog-title
    >
      <span>Ghostfolio Premium</span>
      <gf-premium-indicator class="ml-1" [enableLink]="false" />
    </h1>
    <div class="flex-grow-1 pt-0" mat-dialog-content>
      <div class="align-items-center d-flex h-100 justify-content-center">
        <gf-membership-card
          class="gf-pointer-events-none"
          [name]="data?.user?.subscription?.type"
        />
      </div>
    </div>
    <div class="flex-column" mat-dialog-actions>
      <button
        class="mb-2 py-4 w-100"
        mat-button
        [disabled]="remainingSkipButtonDelay > 0"
        (click)="closeDialog()"
      >
        <ng-container i18n>Skip</ng-container>
        @if (remainingSkipButtonDelay > 0) {
          ({{ remainingSkipButtonDelay }})
        }
      </button>
      <a
        class="m-0 py-4 w-100"
        color="primary"
        mat-flat-button
        [routerLink]="routerLinkPricing"
        (click)="closeDialog()"
      >
        <span i18n>Join now</span>
        <ion-icon class="ml-1" name="arrow-forward-outline" />
      </a>
    </div>
  }
}
